<template>
   <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
         <el-form-item label="服务区" prop="status">
          <el-tree-select
            v-model="queryParams.serviceId"
            :data="deptTreeData"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            :render-after-expand="false"
            show-checkbox
            value-key="id"
            check-strictly
            placeholder="请选择服务区"
            class="with-300"
         />
         </el-form-item>

         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
      </el-form>
      
      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
               v-hasPermi="['system:serviceArea:add']"
            >新增</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="success"
               plain
               icon="Edit"
               :disabled="single"
               @click="handleUpdate"
               v-hasPermi="['system:serviceArea:edit']"
            >修改</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['system:serviceArea:remove']"
            >删除</el-button>
         </el-col>
      </el-row>

      <!-- 表格数据 -->
      <el-table v-loading="loading" :data="serviceAreaList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="服务区名称" prop="serviceName"/>
         <el-table-column label="服务区面积" prop="serviceArea" width="100"/>
         <el-table-column label="员工数量" prop="serviceEmployeeNum" width="100"/>
         <el-table-column label="评分" prop="serviceScore" width="100"/>
         <el-table-column label="联系人" prop="contactPerson" width="100"/>
         <el-table-column label="联系方式" prop="phonenumber"/>
         <el-table-column label="联系邮箱" prop="email"/>
         <el-table-column label="东区小客车车位数" prop="eastSbussParkingNum"/>
         <el-table-column label="东区大客车车位数" prop="eastBbussParkingNum"/>
         <el-table-column label="西区小客车车位数" prop="westSbussParkingNum"/>
         <el-table-column label="西区大客车车位数" prop="westBbussParkingNum"/>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="260">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:serviceArea:edit']">修改</el-button>
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:serviceArea:remove']">删除</el-button>
              <el-button link type="primary" icon="Setting" @click="handleSetBrade(scope.row)" v-hasPermi="['system:serviceArea:grade']">车辆配置</el-button> 
            </template>
         </el-table-column>
      </el-table>

      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
      />
      <config-data :areaData="areaData" @close="close" @submitSuccess="submitSuccess"></config-data>
   </div>
</template>

<script setup name="Role">
import useUserStore from '@/store/modules/user'
import { getServiceArea,delServiceArea } from "@/api/system/service";
import configData from "./configData.vue";
const router = useRouter();
const { proxy } = getCurrentInstance();
const serviceAreaList = ref([]);
const loading = ref(true);
const serviceIds = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    serviceId:""
  }
});
const areaData = reactive({
  title:"",
  open: false,
  serviceId:""
})

const { queryParams } = toRefs(data);

/** 添加服务区配置 */
function handleAdd() {
  areaData.open = true;
  areaData.title = "新增服务区配置";
  areaData.serviceId = ""
}

/** 修改服务区配置 */
function handleUpdate(row) {
  areaData.open = true;
  areaData.title = "修改服务区配置";
  areaData.serviceId = row?.serviceId || serviceIds.value;
}

/** 删除按钮操作 */
const handleDelete = (row) =>{
  const ids = row?.serviceId || serviceIds.value
  proxy.$modal.confirm('是否确认删除选中的数据项?').then(() => {
    return delServiceArea(ids);
  }).then((response) => {
    if(response.code == 200){
      getList();
      proxy.$modal.msgSuccess("删除成功");
    }
    else{
      proxy.$modal.msgError(response?.message || "删除失败");
    }
  }).catch(() => {});
}

/** 搜索按钮操作 */
const handleQuery = () =>{
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = ()=> {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection)=> {
  serviceIds.value = selection.map(item => item.serviceId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 查询服务区配置列表 */
const getList = () =>{
  loading.value = true;
  getServiceArea(queryParams.value).then(response => {
    if (response.code === 200 && response?.rows?.length) {
      serviceAreaList.value = response.rows;
      total.value = response.total;
    }
    else{
      serviceAreaList.value = [];
      total.value = 0;
      proxy.$modal.msgError(response?.message || "获取数据失败");
    }
    loading.value = false;
  });
}

const close = () =>{
  areaData.open = false;
}

const submitSuccess = () =>{
  getList();
  close()
}

/** 配置车辆等级 */
const handleSetBrade = (row) =>{
  router.push({
    path:"/system/serviceArea/brandGrade",
    query:{
      serviceId:row.serviceId
    }
  });
}
const deptTreeData = computed(()=>{
   return useUserStore().deptTreeData
})

getList();
</script>
